<template>
  <div>
    <content-header :title="detail.vTitle"></content-header>
    <div class="content-wrap" v-html="detail.vContent" v-loading="loading"></div>
    <div class="down-wrap" v-if="isShowDownload">
      <div class="xui-fc">
        <div class="xui-fl color-gray">下载提示：</div>
        <p class="xui-fl">{{detail.tip}}</p>
      </div>
      <p  v-if="detail.isCode == 'N'" class="xui-margin-top-sm">
        <span class="color-gray">下载附件：</span>
        <span class="download-link" @click="download(detail.fileUrl)">{{detail.fileName}}</span>
      </p>
      <div v-else >
        <p class="xui-margin-top-sm"><span class="color-gray">下载附件：</span>{{detail.fileName}}</p>
        <el-form  :inline="true" :model="form" class="demo-form-inline xui-margin-top-sm">
          <span class="color-gray xui-margin-top-xs getCode">提取码：</span>
          <el-form-item>
            <el-input v-model="form.code" placeholder="请输入提取码" size="small"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="postCode"  size="small">下载</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import contentHeader from "@/components/widge/content-header.vue";
import {
  getLearningGuideDetail,
  getLearningResourceDetail,
  getPolicyDetail,
  postDownloadCode
} from "@/api/learning-guide";

export default {
  components: {
    contentHeader
  },
  data() {
    return {
      form: {
        code: ""
      },
      detail: {
        vTitle: "",
        vContent: "请稍后..."
      },
      loading: true
    };
  },
  computed: {
    curTab() {
      return this.$route.query.curTab;
    },
    id() {
      return this.$route.params.id;
    },
    isShowDownload() {
      // 1. 判断是否是学习资源页面，若否则不显示
      if (this.curTab != 1) {
        return false;
      }
      console.log();
      // 2. 判断是否限定时间。  若否，则显示
      if (this.detail.isTerm == "N") {
        return true;
      }
      // 3. 当限定时间是，若在时间范围内，则显示
      let curStamp = Date.parse(new Date());
      if (
        curStamp > this.detail.startTimeStamp &&
        curStamp < this.detail.endTimeStamp
      ) {
        return true;
      }

      // 4. 不在规定时间范围内，不显示。
      return false;
    }
  },
  methods: {
    parseTime(t) {
      let dateArr = t.split(" ")[0].split("-");
      let dayStr = t.split(" ")[1];
      let d = new Date();
      let day = d.setFullYear(
        Number(dateArr[0]),
        Number(dateArr[1]) - 1,
        Number(dateArr[2])
      );
      console.log(
        Number(dateArr[0]),
        Number(dateArr[1]) - 1,
        Number(dateArr[2]),
        day
      );
      let dateparse = Date.parse(day);
      console.log(dateparse);
    },
    getPolicyDetail() {
      getPolicyDetail(this.id).then(res => {
        this.detail = res.data;
        this.loading = false;
      });
    },
    getResourceDetail() {
      getLearningResourceDetail(this.id).then(res => {
        this.detail = res.data;
        this.loading = false;
      });
    },
    getGuideDetail() {
      getLearningGuideDetail(this.id).then(res => {
        this.detail = res.data;
        this.loading = false;
      });
    },
    getDetail() {
      /**
        0 学习指南
        1 学习资源
        2 教育政策
       */
      switch (Number(this.curTab)) {
        case 0:
          this.getGuideDetail();
          break;
        case 1:
          this.getResourceDetail();
          break;
        case 2:
          this.getPolicyDetail();
          break;
      }
    },
    download(url) {
      window.open(url);
    },
    postCode() {
      if (this.form.code) {
        postDownloadCode(this.id, this.form.code).then(res => {
          if (res.flag === 1) {
            window.open(res.data);
          } else if (res.flag === -1) {
            this.$message({
              showClose: true,
              type: "error",
              message: res.msg
            });
          }
        });
      } else {
        this.$message({
          showClose: true,
          type: "error",
          message: "请输入提取码"
        });
      }
    }
  },
  mounted() {
    this.getDetail();
    this.parseTime("2018-01-02 11:22:00");
  }
};
</script>
<style lang="less" scoped>
.content-wrap {
  margin: 30px auto;
}
.down-wrap {
  border-top: 1px solid #ddd;
  padding: 10px 20px;
  .download-link {
    text-decoration: underline;
    cursor: pointer;
  }
  .download-link:hover {
    color: #bf9c51;
  }
  .getCode {
    display: inline-block;
    margin-top: 6px;
  }
}
</style>


